<template>
	<view class="search-item">
		<view class="search-icon">
			<icon type="search" size="30rpx" color="#222222" />
		</view>
		<view class="search-content">
			<input v-model="searchName" class="uni-input" confirm-type="search" placeholder="搜索" />
		</view>
		<view class="clear-icon" v-if="searchName" @click="clearSearch">
			<icon type="clear" size="30rpx" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchName: ''
			}
		},
		methods: {
			clearSearch() {
				this.searchName = ""
			}
		}
	}
</script>

<style>
	.search-item {
		height: 72rpx;
		background: rgba(255, 255, 255, 1);
		border: 4rpx solid rgba(245, 245, 245, 1);
		border-radius: 36rpx;
	}

	.search-item,
	.clear-icon {
		display: flex;
		align-items: center;
	}

	.search-icon {
		margin-right: 12rpx;
		display: flex;
		align-items: center;
	}

	.search-content {
		flex: 1;
	}
</style>
